<template>
    <div>
        <el-form :inline="true" :model="typeFrom" >
			<el-form-item label="类型名称：">
			  	 <el-input v-model.trim="typeFrom.typeName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary"  @click="query(1)" id="monitorEnter">查询</el-button>
			</el-form-item>
            	<el-form-item>
				<el-button type="primary"  @click="viewList('add')">新增</el-button>
			</el-form-item>
		</el-form>
        <el-table :data="tableData" border stripe style="width: 100%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column prop="name" label="合同类型名称" align="center">
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
            </el-table-column>
			<el-table-column prop="code" label="类型编号" align="center">
                <template slot-scope="scope">
                    {{scope.row.code}}
                </template>
            </el-table-column>
			<el-table-column prop="expirationWarning" label="是否到期预警" align="center">
                <template slot-scope="scope">
                    {{scope.row.expirationWarning == 0?"是":"否"}}
                </template>
            </el-table-column>
			<el-table-column prop="expirationWarningAdvance" label="到期预警提前量（月）" align="center">
                <template slot-scope="scope">
                    {{scope.row.expirationWarningAdvance}}
                </template>
            </el-table-column>
			<el-table-column prop="expirationWarningCycle" label="到期预警提前周期（月）" align="center">
                <template slot-scope="scope">
                    {{scope.row.expirationWarningCycle}}
                </template>
            </el-table-column>
			<el-table-column prop="applyTemplate" label="是否强制范本" align="center">
                <template slot-scope="scope">
                    {{scope.row.applyTemplate == 0?"是":"否"}}
                </template>
            </el-table-column>
			<el-table-column prop="instart" label="状态" align="center">
                <template slot-scope="scope">
                    {{scope.row.instart==1?"启用":"未启用"}}
                </template>
            </el-table-column>
			<el-table-column label="更新时间" align="center">
				<template slot-scope="scope">
                    {{scope.row.updateTime| getTimeString}}
				</template>
			</el-table-column>
            <el-table-column prop="updateName" label="更新人" align="center">
                <template slot-scope="scope">
                    {{scope.row.updateName}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center"  width="250">
			  <template slot-scope='scope'>
                <el-button type="text" v-if="scope.row.instart==0" @click="start('start',scope.$index)">启用</el-button>
                <el-button type="text" v-else  @click="toVoidSuccBtn('stop',scope.$index)">作废</el-button>
			    <el-button type="text" :disabled="scope.row.instart == 1" @click="viewList('edit',scope.$index)">编辑</el-button>
                <el-button type="text" @click="viewList('view',scope.$index)">详情</el-button>
			    <el-button type="text" :disabled="scope.row.instart == 1" @click="deleteItem('dele',scope.$index)">删除</el-button>
			  </template>
			</el-table-column>
		</el-table>

        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top:30px"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalSize">
        </el-pagination>

        <!-- 作废弹框 -->
		<el-dialog
		  :visible.sync="voidDialogVisible"
		  width="30%"
          :show-close="false"
		  center>
            <el-form :model="fileForm" ref="fileForm" :rules="rules" :inline="true" label-width="auto">
                <el-form-item prop="failReason" label="作废原因">
                    <el-input
                        class="file-text"
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model.trim="fileForm.failReason">
                    </el-input>
                </el-form-item>

            </el-form>
            <span slot="footer">
                <el-button type="primary"  @click="stop">确定</el-button>
                <el-button type="primary"  @click="voidDialogVisible = false">取消</el-button>
            </span>
		</el-dialog>

    </div>

</template>

<script>
import api from '@/api/apiPath'
import utils from '@/common/utils'

export default {
    name: 'contractTypeManage',
    title: '合同类型管理',
	data () {
		return {
            typeFrom:{},
            fileForm:{},
            tableData:[],
            textarea:"",
            voidDialogVisible:false,
            stopItemIndex:'',

            pageNum: 1,
            pageSize: 10,//每页几条
            totalSize: 0,
            rules:{
                failReason:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入作废原因'));
                            }
                            if(value.length>50){
                                    return callback(new Error('作废原因长度不能大于50'));
                            }
                            callback();
                        }
                    }
                ],
            }

        }
    },
    methods:{
        viewList(type,idx){
            let id,code;
            if(type != 'add'){
               ({id,code} = this.tableData[idx]);

            }
            this.$router.push({path: '/changeContractType', query: {pageType:type,listId:id,listCode:code}})
        },
        //作废
        toVoidSuccBtn(type,idx){
           this.voidDialogVisible = true;
           this.stopItemIndex = idx;
        },
        stop(){
            this.$refs.fileForm.validate((valid)=>{
                if(!valid){
                        return false;
                }
                this.postTnstartOrfail(this.stopItemIndex,0)
            })
        },
        //启用
        start(type,idx){
            this.$confirm(`确定要启用这份合同类型吗？`, '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.postTnstartOrfail(idx,1)
            }).catch(() => {

            });
        },
        postTnstartOrfail(idx,instart){
            let {id,code} = this.tableData[idx];
            let params = {
                id:id,
                code:code,
                instart:instart,

            }
            if(instart == 0) params.failReason = this.fileForm.failReason;
            this.axios.post(api.CHANGETYPEINSTART, params).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: instart== 1?'已启用':"已作废",
                        });
                        this.tableData[idx].instart = instart;
                        this.searchList();
                        this.voidDialogVisible = false;
                    }
                })
        },
        //删除单条类型
        deleteItem(type,idx){
             this.$confirm(`确定要删除这份合同类型吗？`, '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                let {id,code} = this.tableData[idx];
                let params = {
                    id:id,
                    code:code,
                };
                this.axios.post(api.DELETYPEMANAGE, params).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '已删除',
                        });
                        this.tableData.splice(idx,1);
                    }
                })

            }).catch(() => {

            });
        },
        //加载列表
        query(pageNum){
            let param = {
                pageNum:pageNum||this.pageNum,
                pageSize:this.pageSize,
                name:this.typeFrom.typeName || '',
            };
            this.searchList(pageNum)
        },
        searchList(pageNum){
            let param = {
                pageNum:pageNum||this.pageNum,
                pageSize:this.pageSize,
                name:this.typeFrom.typeName || '',
            };
            this.axios.post(api.TYPEMANAGELIST, param).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data.list
                    this.totalSize = res.data.data.total
                }
            })

        },
        handleCurrentChange () {
            this.searchList()
		},
		handleSizeChange (val) {
			this.pageSize = val
			this.searchList(1)
		},

	},
	created () {
        this.searchList()
    },
	destroyed() {

	},
	 filters: {
        getTimeString(time){
            return utils.getTimeString(time);
        }
	}
}

</script>

<style lang="stylus" scoped>

    .file-text{
        width: calc( 30vw - 140px);
    }
</style>
